<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ include file="/static/common/common.jspf"%>
<div id="m_context">
	<script type="text/javascript">
		$(function() {
			var status = "";
			
			$("#userList").datagrid({
				fit : false,
				title : '用户列表',
				width: $(window).width() - 10,
     	        height: $(window).height() - 10,
				fitColumns : true,
				pagination : true,
				loading	: true,
				url : '${ctx}/user/userList',
				columns : [ [ {
					field : 'ck',
					checkbox : true
				},{
					field : 'id',
					title : 'id',
					width : 100
				},{
					field : 'username',
					title : '姓名',
					width : 200,
					editor:'textbox'
				}, {
					field : 'password',
					title : '密码',
					width : 200,
					editor:'textbox'
				} ] ],
				onAfterEdit: function (rowIndex, rowData, changes) {
                    console.info(rowData);
                    var url = '${ctx}/user/saveUser';
                    if (status=="edit") {
                    	url = '${ctx}/user/updateUser'
                    }
                    status = "";
                    $.post(url, {'ajaxData' : JSON.stringify(rowData)}, function (data){
                    	$('#userList').datagrid('reload');
                    	if (data=="ok") {
							$.messager.show({
								title : '系统提示',
								msg : '操作成功'
							});
                		}else {
                			$.messager.show({
								title : '系统提示',
								msg : '<font style="color:red">保存失败：'+data+'</font>'
							});
                		}
                	})
                },
			});
			
			//设置分页显示的内容
			var p = $('#userList').datagrid('getPager');
            $(p).pagination({
                beforePageText: '第',
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
            
            //添加
            $('.bt_add').on('click', function (){
            	//清空选择
            	$("#userList").datagrid('clearSelections');
            	//新增一行
   				$('#userList').datagrid('appendRow',{ck: true});
            	//得到新增行的行号
   				editIndex = $('#userList').datagrid('getRows').length-1;
            	//打开编辑模式
   				$('#userList').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
   				status = "add";
            })
            
            //保存
            $('.bt_save').on('click', function (){
            	/* var row = $('#userList').datagrid('getSelected');
            	var index = $('#userList').datagrid('getRowIndex', row); */
            	//得到正在编辑的行号
            	var index = $('.datagrid-row-editing').parent().children("tr").index($('.datagrid-row-editing'));
            	//结束编辑模式
            	$('#userList').datagrid('selectRow', index).datagrid('endEdit', index);
            })
            
            //修改
            $('.bt_update').on('click', function (){
            	var row = $('#userList').datagrid('getSelected');
            	if (row==null) {
            		$.messager.alert('系统提示', '最少选择一行');
            		return;
            	}
            	if ($('#userList').datagrid('getSelections').length>1) {
            		$.messager.alert('系统提示', '一次只能修改一行');
            		return;
            	}
            	//得到row这行数据的行号
            	var index = $('#userList').datagrid('getRowIndex', row);
            	$('#userList').datagrid('selectRow', index).datagrid('beginEdit', index);
            	status = "edit";
            })
            
            //删除
            $('.bt_delete').on('click', function (){
            	var rows = $('#userList').datagrid('getSelections');
            	$.post('${ctx}/user/deleteUser', {'users' : JSON.stringify(rows)}, function (data){
            		$('#userList').datagrid('reload');
            		if (data=="ok") {
						$.messager.show({
							title : '系统提示',
							msg : '删除成功'
						});
            		}else {
            			$.messager.show({
							title : '系统提示',
							msg : '<font style="color:red">删除失败：'+data+'</font>'
						});
            		}
            	})
            })
            
            //数据表格跟随改变大小
            $(window).resize(function () {
       	        $('#userList').datagrid('resize', {
       	           width: $(window).width() - 10,
       	           height: $(window).height() - 10
       	        }).datagrid('resize', {
       	            width: $(window).width() - 10,
       	            height: $(window).height() - 10
       	        });
       	    });
		});
	</script>
	<table id="userList" toolbar="#tb"></table>
	<div id="tb">
		<a href="#" class="easyui-linkbutton bt_add" iconCls="icon-add" plain="true">新增</a> 
		<a href="#" class="easyui-linkbutton bt_save" iconCls="icon-save" plain="true">保存</a>
		<a href="#" class="easyui-linkbutton bt_update" iconCls="icon-edit" plain="true">修改</a> 
		<a href="#" class="easyui-linkbutton bt_delete" iconCls="icon-delete" plain="true">删除</a>
	</div>
	
</div>